/*
 * 创建公司信息页面
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-15 10:56:48
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-customer-company-create">
		<Row
			type="flex"
			justify="start">
			<i-col>
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(100, 150)"
					name="create__form">

					<Form-item
						:label="$t('company.name')"
						prop="company_name">
						<i-input
							v-model="formValidate.company_name"
							:placeholder="$t('common.placeholder',{field: $t('company.name')})"
							name="create__name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('company.product_sale')"
						prop="product_price">
						<InputNumber v-model="formValidate.product_price"/>
					</Form-item>

          <!-- 类别 -->
          <Form-item
            :label="$t('product.category')"
            prop="category_id">
            <Row>
              <i-col span="16">
                <Select
                  v-model="formValidate.category_id">
                  <OptionGroup
                    v-for="(item,key) in groupCategories"
                    :key="key"
                    :label="item.custom_type_name">
                    <Option
                      v-for="(value,key) in item.categories"
                      :value="value.id"
                      :key="key">{{ value.name }}</Option>
                  </OptionGroup>
                </Select>
              </i-col>
            </Row>
          </Form-item>

					<Form-item
						:label="$t('company.product_img')"
						prop="product_image">
						<Uploader
							ref="product_image"
							@on-remove="(file)=>{handleRemove('product_image',file)}"
							@on-change="(file)=>{handleChange('product_image',file)}">
							{{ $t('common.pic_tip') }}
						</Uploader>
					</Form-item>

					<Form-item
						:label="$t('company.product_desc')"
						prop="description">
						<i-input
							v-model="formValidate.description"
							:placeholder="$t('common.placeholder',{field: $t('company.product_desc')})"
							type="text"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							name="create__submit"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							name="create__reset"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { validateImage } from 'src/validate';

import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'CompanyCreate',

	components: {
		Uploader,
	},

	mixins: [showLocalImage, labelWidthMixin],

  props: {
    groupCategories: {
      type: Array,
      default() {
        return [];
      },
    },
  },

	data() {
		return {
			formValidate: {
				company_name: '', // 商家名称
				product_price: 1, // 产品价格
				description: '', // 产品描述
				product_image: '', // 产品图片
        category_id: null, // 分类
			}, // 新增公司的表单

			ruleValidate: { // 表单验证规则
				company_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('company.name') }),
						trigger: 'blur,change',
					},
				],
				product_price: [
					{
						required: true,
						type: 'number',
						trigger: 'blur,change',
					},
				],
				description: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('company.product_desc') }),
						trigger: 'blur,change',
					},
				],
				product_image: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
        category_id:[
          {
            required: true,
            type: 'number',
            message: this.$t('validate.required', { field: this.$t('product.category') }),
            trigger: 'blur,change',
          },
        ],
			},
		};
	},
	methods: {

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},

		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},


		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.formDataCreate());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.product_image.reset();
			this.$refs[name].resetFields();
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} { 拼接好的formdata数据 }
         */
		formDataCreate() {
			const new_object = {
				company_name: this.formValidate.company_name, // 公司名称
				product_price: this.formValidate.product_price, // 產品零售價
				product_image: this.formValidate.product_image, // 產品圖片
				description: this.formValidate.description, // 商品描述
				category_id: this.formValidate.category_id, // 商品分类
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined' && new_object[key]) {
					form_data.append(key, new_object[key]);
				}
			});

			return form_data;
		},

	},
};
</script>
